<h2 align="center">{$gallery.title}</h2>
{if $gallery.items.image|@count > 0}
<strong>{#Images#}:</strong>
<ul class="gallery-list">
	{foreach from=$gallery.items.image item=gi key=k}
	<li>
		<a href="javascript:void(0)" onclick="ImageZoom($(this).find('img'))"><img src="{#root#}/userfiles/gallery/{$gallery.id}/thumb/{if $gi.thumbnail|count_characters}{$gi.thumbnail}{else}{$gi.src}{/if}" alt="" /></a>
	</li>
	{/foreach}
</ul>
{/if}

{if $gallery.items.video|@count > 0}
	{if $gallery.items.image|@count > 0}
		<br clear="all" />
	{/if}
<strong>{#Videos#}:</strong>
<ul class="gallery-list">
	{foreach from=$gallery.items.video item=gi key=k}
	<li>
		<a href="javascript:void(0)" onclick="VideoZoom('{$gi.id}')"><img src="{#root#}/userfiles/gallery/{$gallery.id}/thumb/{$gi.thumbnail}" alt="" /></a>
	</li>
	{/foreach}
</ul>
{/if}


<script type="text/javascript">
{literal}
	ImageGalleryCenterImages();
	function ImageZoom(img) {
		var zimg = img.clone();
		zimg.attr("src",zimg.attr("src").replace(/\/thumb\//,"/"));
		ZoomImageShow(zimg);
	}
	function ZoomImageShow(zimg) {
		zimg.hide();
		var div = $("#image-zoom-div");
		if(!div.length) {
			div = $('<div id="image-zoom-div" class="loading"></div>');
			div.dialog({
				modal: true,
				width: 140,
				height: 100,
				beforeclose: function(e) {
					$(e.target).remove();
				}
			});
		}
		
		if(ZoomImageIsComplete(zimg)) {
			div.removeClass("loading");
			div.html(zimg);
			div.parent().animate({
				width: zimg.width()+30,
				left: Math.round(($(window).width()-zimg.width())/2),
				top: Math.round(($(window).height()-zimg.height())/2)
			});
			div.animate({
				width: zimg.width(),
				height: zimg.height() + 25
			});
			zimg.fadeIn();
		}else{
			setTimeout(function(){ZoomImageShow(zimg)}, 500);
		}
	}
	function ZoomImageIsComplete(img) {
		if($.browser.msie && $.browser.version<7) {
			return true;
		}else{
			return img[0].complete ? true : false;
		}
	}

	function VideoZoom(id) {
		var w = 640;
		var h = 480;
		
		var div = $('<div id="video-zoom-div"></div>');
		div.dialog({
			modal: true,
			width: w + 30,
			height: h + 80,
			beforeclose: function(e) {
				$(e.target).remove();
			}
		});

		videofile = root + "/gallery/video/" + id;
		
		vp = new FlashObject("video-zoom-div");

		vp.addAttr("width",w>0 ? w : 640);
		vp.addAttr("height",h>0 ? h : 480);

		vp.addParam("movie", root + "/img/videoplayer.swf");
		vp.addParam("quality","high");
		vp.addParam("scale","ExactFit");
		vp.addParam("FlashVars","video=" + escape(videofile) + "&preview=");

		vp.make();
		
	}
{/literal}
</script>